<template>
  <div v-loading="listLoading" class="app-container">
    <el-form
      :inline="true"
      :model="formInline"
      label-suffix="："
      class="demo-form-inline"
      label-width="100px"
      label-position="right"
      ref="formInline"
    >
      <el-form-item label="商家名称" prop="name">
        <el-input v-model="formInline.name" placeholder="商家名称" @keyup.enter='getList'/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="getList">查询</el-button>
        <el-button size="small" @click='Reset'>重置</el-button>
        <el-button type="primary" size="small" @click="addBusiness"
          >添加商家</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      fit
      :header-cell-style="{
        textAlign: 'center',
        color: '#909399',
        backgroundColor: '#f8f8f8',
      }"
    >
      <el-table-column label="ID" prop="id" align="center" />
      <el-table-column label="商家名称" prop="title" align="center" />
      <el-table-column label="联系电话" prop="store_phone" align="center" />
      <el-table-column label="营业时间" prop="business_hours" align="center" />
      <el-table-column label="商家地址" prop="store_address" align="center" />
      <el-table-column label="商家公告" prop="announcement" align="center" />
      <el-table-column
        label="操作"
        prop="handle"
        align="center"
        fixed="right"
        width="300"
      >
        <template #default="{ row }">
          <div>
            <el-button size="mini" type="primary" @click="get_detail(row)"
              >查看详情</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="edit(row.id)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="remove_store(row.id)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="formInline.total > 0"
      :total="formInline.total"
      :page.sync="formInline.page"
      :limit.sync="formInline.limit"
      @pagination="getList"
    />
    <!-- 详情 -->
    <Detail ref="detail" />
  </div>
</template>

<script>
import { get_store_list, delete_store } from "@/api/store";
import pagination from "@/components/Pagination";
import Detail from "./components/detail.vue";
export default {
  components: { pagination, Detail },
  data() {
    return {
      listLoading: false,
      formInline: {
        total: 10,
        page: 1,
        limit: 10,
        name:''
      },
      tableData: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      this.listLoading = true;
      await get_store_list(this.formInline).then(({ data }) => {
        console.log("data: ", data);
        this.tableData = data.list;
        this.formInline.total = data.total;
      });
      this.listLoading = false;
    },
    get_detail(row) {
      this.$refs.detail.open(row);
    },
    remove_store(id) {
      this.$confirm("确认要删除该商家?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delete_store({ id }).then((data) => {
          if (data.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.getList();
          } else {
            this.$message({
              type: "error",
              message: "删除失败",
            });
          }
        });
      });
    },
    Reset(){
      this.$refs.formInline.resetFields();
      this.getList()
    },
    addBusiness() {
      this.$router.push("/business/add");
    },
    edit(id) {
      this.$router.push({path:"/business/edit",query:{id}});
    },
  },
};
</script>

<style scoped></style>
